<template>
    <div style="position: relative;width: 100%;height: 100%;background-color: #f1f4f5;">
      <p class="friend-tit">我邀请的朋友</p>
      <x-table :cell-bordered="false" style="background-color:#fff;">
        <thead>
          <tr>
            <th>昵称</th>
            <th>关注时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in getinvite.all">
            <td style="font-size: 12px;">{{item.nickname}}</td>
            <td style="font-size: 12px;">{{new Date(item.create_at*1000).toLocaleString()}}</td>
          </tr>
        </tbody>
      </x-table>
      <p class="bottom-tips" :style="getinvite.status == '1' ? 'display: none' : 'display: block'">您已邀请{{getinvite ? getinvite.new.length : 0}}人，还需邀请{{getinvite ? (parseInt(num) - getinvite.new.length >= 0 ? parseInt(num) - getinvite.new.length : 0 ) : num}}人</p>
      <p class="get-vip" style="width: 100%;height: 50px;line-height" @click="getVip()">{{botTit}}</p>
    </div>
</template>
<script type='text/ecmascript-6'>
  import t from './../../api/public'
  import { XTable, LoadMore, AlertPlugin } from 'vux'
  import $ from 'jquery'
  export default {
    components: {
      XTable,
      LoadMore,
      AlertPlugin
    },
    data () {
      return {
        tit: '你未达到兑换条件哦 <br/> 快去邀请朋友吧',
        getinvite: [],
        num: '',
        botTit: '兑换VIP',
      }
    },
    mounted () {
      document.title = '我邀请的朋友'
      let that = this
      t.xhr.getPost({
        siteId: 1,
        act: 'home/invite/getinvite',
        data: {
          openid: t.myStorage.getLocal('openid')
        }
      }, function (data) {
        t.l(data, 111)
        that.getinvite = data.data

        if (that.getinvite.status == '1') {
          that.botTit = '你已经获取VIP会员（每人仅限一次）'
        } else {
          that.botTit = '兑换VIP'
        }
      })

      t.xhr.getPost({
        siteId: 1,
        act: 'home/activity/getrule',
      }, function (data) {
        t.l(data, 1112)
        that.num = data.data
      })
    },
    methods: {
      getVip() {
        var that = this;
        if (that.getinvite.status == '1') {
          return;
        }
        if (that.getinvite.new.length >= parseInt(that.num)) {
          that.tit = '恭喜您获得90天<br/>VIP使用权限'
          t.xhr.getPost({
            siteId: 1,
            act: 'home/activity/getvip',
            data: {
              openid: t.myStorage.getLocal('openid')
            }
          }, function (data) {
            // that.$router.push('/home')
          })
          this.$vux.alert.show({
            content: that.tit,
            onHide () {
              that.$router.push('/home')
            }
          })
        } else {
          that.tit = '你未达到兑换条件哦 <br/> 快去邀请朋友吧'
          this.$vux.alert.show({
            content: that.tit,
            onHide () {
              t.xhr.getPost({
                siteId: 1,
                act: 'home/activity/getvip',
              }, function (data) {
                window.location.href = 'http://dmyzs.test.juefei88.com/h5/vip.html'
              })
            }
          })
        }
      },
    }
  }
</script>
<style>
  .friend-tit{
    padding: 10px 0;
    text-align: center;
    color: #333;
  }
  .bottom-tips{
    position: fixed;
    bottom: 70px;left: 0;
    width: 100%;
    text-align: center;
  }
  .get-vip{
    position: fixed;
    bottom: 0;left: 0;
    width: 100%;
    height: 50px;line-height: 50px;
    text-align: center;
    font-size: 14px;
    color: #333;
    background: #FFF;
    z-index: 999;
  }
</style>
